<template>
  <view class="volunteerApplication">
    <uni-head title="个人信息"></uni-head>
    <view class="content">
      <u--form labelPosition="left" :model="formData" :rules="formRules" ref="uForm" errorType="toast"
        labelWidth="220rpx">
        <u-form-item label="头像" borderBottom prop="avatarViewUrl" @click="changeAvatar">
          <view class="tx">
            <image mode="aspectFill" :src="formData.avatarViewUrl"></image>
          </view>
          <u-icon slot="right" name="arrow-right" color="#D0D0D0"></u-icon>
        </u-form-item>
        <u-form-item label="昵称" prop="nickName" borderBottom>
          <u--input v-model="formData.nickName" inputAlign="right" fontSize="32rpx" color="#323232"
            border="none"></u--input>
        </u-form-item>
        <u-form-item label="真实姓名" prop="name" borderBottom>
          <u--input v-model="formData.name" inputAlign="right" fontSize="32rpx" color="#323232"
            border="none"></u--input>
        </u-form-item>
        <u-form-item label="性别" prop="sexName" borderBottom @click="sexClick">
          <text>{{ formData.sexName }}</text>
          <u-icon slot="right" name="arrow-right" color="#D0D0D0"></u-icon>
        </u-form-item>

        <u-form-item label="身份证" prop="person.idCardNo" borderBottom v-if="formData && formData.person">
          <u--input v-model="formData.person.idCardNo" :maxlength="18" inputAlign="right" fontSize="32rpx"
            color="#323232" border="none"></u--input>
        </u-form-item>

        <u-form-item label="手机" prop="person.phone" borderBottom>
          <u--input v-model="formData.person.phone" :maxlength="11" inputAlign="right" fontSize="32rpx" color="#323232"
            border="none"></u--input>
        </u-form-item>
        <!-- <u-form-item label="邮箱" borderBottom>
          <u--input v-model="formData.mail" inputAlign="right" fontSize="32rpx" color="#323232" border="none"></u--input>
        </u-form-item> -->

        <u-form-item label="师资主业" borderBottom @click="szzyClick">
          <!-- <u--input v-model="formData.ifTeacher" disabled disabledColor="#fff" inputAlign="right" fontSize="32rpx"
            color="#323232" border="none"></u--input> -->
          <text style="color: #323232;font-size: 32rpx;">{{ formData.ifTeacher == 1 ? '是' : '否' }}</text>
          <u-icon slot="right" name="arrow-right" color="#D0D0D0"></u-icon>
        </u-form-item>

        <u-form-item label="技术档案" borderBottom @click="jsdaClick">
          <text>{{ formData.jsda }}</text>
          <!-- <u--input
              v-model="formData.jsda"
              disabled
              disabledColor="#fff"
              inputAlign="right"
              fontSize="32rpx"
              color="#323232"
              border="none"
            ></u--input> -->
          <u-icon slot="right" name="arrow-right" color="#D0D0D0"></u-icon>
        </u-form-item>
        <u-form-item label="人脸识别" @click="rlsbClick">
          <!-- <u--input v-model="formData.rlsb" disabled disabledColor="#fff" inputAlign="right" fontSize="32rpx"
            color="#323232" border="none"></u--input> -->
          <text style="color: #FF6B00;font-size: 32rpx;">还未认证噢</text>
        </u-form-item>
      </u--form>
    </view>

    <view class="footer">
      <view class="btn cancel" @click="cancelClick">
        <span>取消</span>
      </view>
      <view class="btn confirm" @click="submitClick">
        <span>更新</span>
      </view>
    </view>

    <!-- 人脸识别 -->
    <faceRecognition v-if="isShowFaceRecognition" @clone="isShowFaceRecognition = false"></faceRecognition>

    <!-- 性别选择 -->
    <u-picker v-if="isShowSex" :show="isShowSex" :columns="[sexOptionNames]" @confirm="sexConfirm"
      @cancel="isShowSex = false"></u-picker>

    <!-- 师资主业 -->
    <u-picker v-if="isShowSzzy" :show="isShowSzzy" :columns="[szzyOptionNames]" @confirm="szzyConfirm"
      @cancel="isShowSzzy = false"></u-picker>
  </view>
</template>

<script>
import { userCurrentInfo } from "@/common/api/user/user.js";
import faceRecognition from "@/components/faceRecognition/faceRecognition.vue";
import { userUpdateCurrentInfo } from "@/common/api/user/user.js";
export default {
  components: {
    faceRecognition,
  },
  data() {
    return {
      isShowFaceRecognition: false,
      isShowSex: false,
      sexOptions: [], //性别选择
      sexOptionNames: [], //性别选择
      isShowSzzy: false,
      szzyOptions: [
        {
          dictLabel: '是',
          dictValue: 1
        },
        {
          dictLabel: '否',
          dictValue: 0
        }
      ], //师资主业选择
      szzyOptionNames: ['是', '否'], //师资主业选择 
      formData: {
        name: '',
        sexName: '',
        sexCode: '',
        person: {
          phone: '',
          idCardNo: '',
        }
      },
      formRules: {
        avatarViewUrl: [
          {
            required: true,
            message: "请上传头像",
            trigger: ["blur", "change"],
          },
        ],
        nickName: [
          {
            required: true,
            message: "请输入昵称",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: ["blur", "change"],
          },
        ],
        sexName: [
          {
            required: true,
            message: "请选择性别",
            trigger: ["blur", "change"],
          }
        ],
        ['person.idCardNo']: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: ["blur", "change"],
          },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "身份证号格式不正确",
            trigger: ["blur", "change"],
          }
        ],
        ['person.phone']: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号",
            trigger: ["blur", "change"],
          }
        ]
      },
    };
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    this.$refs.uForm.setRules(this.formRules);
  },
  onLoad() {
    // 获取用户信息
    this.getUserCurrentInfo();
    this.getDicts('sys_user_sex').then(res => {
      console.log(res, 'res');
      if (res && res.code == 200 && res.data) {
        this.sexOptions = res.data
        this.sexOptionNames = res.data.map(item => item.dictLabel)
        console.log(this.sexOptionNames, 'this.sexOptionNames');
      }
    })
  },
  methods: {
    // 师资主业
    szzyClick() {
      this.isShowSzzy = true
    },
    // 师资主业确认
    szzyConfirm(e) {
      this.formData.ifTeacher = this.szzyOptions[e['indexs'][0]].dictValue
      this.isShowSzzy = false
    },
    // 技术档案
    jsdaClick() {
      uni.navigateTo({
        url: "/pages/personalInfo/technicalArchives/technicalArchives",
      });
    },
    // 人脸识别点击
    rlsbClick() {
      console.log(11);
      return
      this.isShowFaceRecognition = true;
      // uni.switchTab({
      //   url: `/pages/index/index`,
      // });
    },
    // 上传头像
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: '/dev-api' + 'sys/file/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              Authorization: "Bearer " + uni.getStorageSync('token')
            },
            formData: {
              type: 'avatar'
            },
            success: (res) => {
              this.formData.avatarViewUrl = JSON.parse(res.data).data.viewUrl;
              this.formData.avatar = JSON.parse(res.data).data.url;
              this.$forceUpdate();
            }
          });
        }
      });
    },
    // 性别选择
    sexClick() {
      this.isShowSex = true
    },
    // 性别选择确认
    sexConfirm(e) {
      this.formData.sexCode = this.sexOptions[e['indexs'][0]].dictValue
      this.formData.sexName = this.sexOptions[e['indexs'][0]].dictLabel
      this.isShowSex = false
    },
    // 取消
    cancelClick() {
      uni.switchTab({
        url: `/pages/my/my`,
      });
    },
    // 提交
    submitClick() {
      this.$refs.uForm.validate()
        .then((res) => {
          userUpdateCurrentInfo(this.formData).then((res) => {
            if (res && res.code == 200 && res.data) {
              uni.showToast({
                title: "更新成功",
                icon: "none",
              });
              setTimeout(() => {
                uni.switchTab({
                  url: `/pages/my/my`,
                });
              }, 800);
            }
          });
        })
    },

    // 获取用户信息
    getUserCurrentInfo() {
      userCurrentInfo({}).then((res) => {
        if (res && res.code == 200 && res.data) {
          this.formData = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.volunteerApplication {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  width: 100%;
  height: 100%;
  /* background: linear-gradient(170deg, #dfeafc 0%, #ffffff 100%); */
  overflow: hidden;
  padding: 0 32rpx;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("~@/static/images/personalInfo/bj.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .content {
    z-index: 1;
    flex: 1;
    height: 100%;
    overflow: auto;
    padding: 0 24rpx 36rpx 30rpx;

    background: #ffffff;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.01);
    border-radius: 16rpx;

    /deep/.u-form-item__body {
      /* padding: 36rpx 0; */
      padding: 0;
      height: 100rpx;
    }

    /deep/.u-form-item__body__left__content__label {
      font-size: 32rpx;
      color: #323232;
    }

    /deep/.u-line {
      border-color: #eeeeee !important;
      border-bottom: 2rpx solid #eeeeee !important;
    }

    .tx {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      image {
        width: 68rpx;
        height: 68rpx;
        border-radius: 34rpx;
      }
    }

    text {
      width: 100%;
      display: block;
      font-weight: 500;
      font-size: 32rpx;
      color: #323232;
      text-align: right;
    }

    .radioList {
      display: flex;
      align-items: center;

      .radioItem {
        display: flex;
        align-items: center;

        &:first-child {
          margin-right: 40rpx;
        }

        image {
          width: 40rpx;
          min-width: 40rpx;
          max-width: 40rpx;
          height: 40rpx;
          min-height: 40rpx;
          max-height: 40rpx;
          margin-right: 8rpx;
        }

        span {
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.6);
        }
      }

      .radioItemActive {
        span {
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }

  .footer {
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 20rpx 0rpx;

    .btn {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: 800;
      padding: 24rpx 0;
      border-radius: 48rpx;
      line-height: 1;

      &.cancel {
        background: #ffffff;
        border: 2rpx solid #348af6;
        color: #1a63ff;
      }

      &.confirm {
        margin-left: 27rpx;
        background: linear-gradient(115deg, #438bfe 0%, #1a63ff 100%);
        color: #fefefe;
      }
    }
  }
}
</style>
